<template>
  <view>
    <view class="b-box">
      <view class="title">
        <view class="title-count">共{{ videoInfo.questionList.length }}道题，已完成 {{ current_answer_num }} 题</view>
        <view class="title-button" @click="goBack()">重看视频</view>
      </view>
      <answer-subject @choose_answer="choose_answer" :questionList="videoInfo.questionList" type="set"></answer-subject>
      <view class="answer-btn" @click="submit()">提交</view>
    </view>
    <!-- 答题错误弹框   list.title 视频标题  list.status  答题状态   url 点击button跳转的页面 -->
    <newAnswerMessage v-if="answer_error" :list="jgList" :url="backUrl" :videoId="videoId"></newAnswerMessage>
  </view>
</template>

<script>
import answerSubject from "@/pages/newAnswer/components/answer-subject.vue";

export default {
  components: {answerSubject},
  data() {
    return {
      videoId: '',
      code: '',
      videoInfo: {},
      jgList: {
        progress: [],
        end: []
      },
      answer_error: false,
      backUrl: '', // 重新观看url

      current_answer_num: 0,
      activityId: '',
      ids: [],
      AnswerTime: {}
    }
  },
  onLoad(req) {
    this.videoId = req.videoId;
    this.activityId = req.activityId;
    this.code = req.code;
    var idsarr = decodeURIComponent(req.ids).split(',')
    console.log(idsarr, 'ws')
    if (idsarr[0]) {
      this.ids = idsarr;
    }
    this.getVideo();
    this.backUrl = '/pages/newAnswer/completePaly?requestCode=' + this.code + '&videoId=' + this.videoId;
    this.$dadian("");
    this.setAnswerTime()
  },
  onUnload() {
    clearInterval(this.AnswerTime)
  },
  methods: {
    // 答题时间
    setAnswerTime() {
      this.AnswerTime = setInterval(() => {
        let time = uni.getStorageSync("videoAnswer:time" + '-' + this.videoInfo.id) || 0
        time++
        uni.setStorageSync("videoAnswer:time" + '-' + this.videoInfo.id, time)
      }, 1000)
    },
    getVideo() {
      var that = this;
      var data = {
        videoId: this.videoId,
        questionIds: that.ids
      };
      that.$NoteApi.doRequest("post", "ruiVideo/detail", data, 'json').then(res => {
        if (res.data.code == 0) {
          var datas = res.data.data;
          if (datas?.questionList) {
            for (var i = 0; i < datas.questionList.length; i++) {
              datas.questionList[i].current_choose = 99;
              datas.questionList[i].all_choose = [];
            }
            this.videoInfo = datas;
          }

          if (datas.appearScene === 1) {
            this.submit()
          }
        }
      })
    },
    // 选择答案
    choose_answer(index, indexTwo, type = 0) {
      if (type === 0) {
        this.videoInfo.questionList[index].current_choose = indexTwo;
      } else if (type === 1) {
        // 多选
        if (this.videoInfo.questionList[index].all_choose.includes(indexTwo)) {
          // 删除
          this.videoInfo.questionList[index].all_choose.splice(this.videoInfo.questionList[index].all_choose.indexOf(indexTwo), 1)
        } else {
          // 添加
          this.videoInfo.questionList[index].all_choose.push(indexTwo)
        }
      }
      var num = 0;
      for (var i = 0; i < this.videoInfo.questionList.length; i++) {
        if (this.videoInfo.questionList[i].current_choose != 99 || this.videoInfo.questionList[i].all_choose.length > 0) {
          num++;
        }
      }
      this.current_answer_num = num;
    },
    submit() {
      var key = 'kTzsAsJXUDK-LysX7j8qY7qWgzWT_kVQv_F7-IJvHbk';
      var that = this;
      that.$NoteApi.doRequest("post", "rkAuthAndPush/needTipAuthJudge", {}, 'json').then(res => {
        if (res.data.code == 0) {
          // true 需要上报 false 不需要
          if (res.data.data) {
            uni.requestSubscribeMessage({
              tmplIds: ['kTzsAsJXUDK-LysX7j8qY7qWgzWT_kVQv_F7-IJvHbk'],
              success(resquest) {
                that.submitNext();
                if (resquest[key] == 'accept') {
                  that.pushMessagee();
                }
              }
            })
          } else {
            that.submitNext();
            // that.pushMessagee();
          }
        }
      })
    },
    // 提交答案
    submitNext() {
      let answers = [];
      let abcArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
      // 视频观看完成答题结果
      for (let i = 0; i < this.videoInfo.questionList.length; i++) {
        if (this.videoInfo.questionList[i].current_choose === 99 && this.videoInfo.questionList[i].all_choose.length === 0) {
          uni.showToast({
            title: '请完整答题!',
            icon: "none"
          })
          return
        } else {
          let answer
          if (this.videoInfo.questionList[i].questionType === 2 && this.videoInfo.questionList[i].multiple === 2) {
            // 多选
            answer = JSON.stringify(this.videoInfo.questionList[i].all_choose.map(item => abcArray[item]))
          } else {
            // 单选
            answer = abcArray[this.videoInfo.questionList[i].current_choose]
          }
          answers.push({
            answer: answer,
            questionId: this.videoInfo.questionList[i].id
          })
        }
      }
      // 答题中结果
      for (let i = 0; i < this.videoInfo.playingQuestionList.length; i++) {
        answers.push({
          questionId: this.videoInfo.playingQuestionList[i].id,
          answer: abcArray[uni.getStorageSync('videoAnswer:' + this.videoInfo.id + '-' + i)]
        })
      }
      var that = this;
      var data = {
        videoId: this.videoId,
        unitList: answers,
        questionTime: uni.getStorageSync("videoAnswer:time" + '-' + this.videoId)
      };
      that.$NoteApi.doRequest("post", "ruiVideo/answer/submit", data, 'json').then(res => {
        that.set_answer_storage();
        if (res.data.code === 0) {
          // jgList:[{title:'题目1',status:true}],
          var info = res.data.data;
          // 答错误
          if (info.hasError) {
            for (var i = 0; i < info.unitList.length; i++) {
              this.jgList.end.push({
                title: info.unitList[i].answer,
                status: info.unitList[i].isRight === 1
              })
            }
            for (let i = 0; i < info.playingList.length; i++) {
              this.jgList.progress.push({
                title: info.playingList[i].answer,
                status: info.playingList[i].isRight === 1
              })
            }
            this.answer_error = true;
          } else { // 答对
            clearInterval(this.AnswerTime)
            uni.reLaunch({
              url: '/pages/newAnswer/end?code=' + this.code + '&video_id=' + this.videoId + '&activityId=' + this.activityId + '&myRank=' + info.myRank
            })
          }
        }
      })
    },
    // 答题完成后 如果对 去缓存删除 不对保持不动
    set_answer_storage() {
      // 清空播放缓存&&答题时常缓存
      uni.removeStorageSync("videoAnswer:videoTime" + this.videoId)
      uni.removeStorageSync("videoAnswer:time" + '-' + this.videoId)
      // 清空选择缓存
      for (let i = 0; i < this.videoInfo.playingQuestionList.length; i++) {
        uni.removeStorageSync('videoAnswer:' + this.videoId + '-' + i)
      }
    },
    // 授权上报
    pushMessagee() {
      var that = this;
      that.$NoteApi.doRequest("post", "rkAuthAndPush/report", {}, 'json').then(res => {
        if (res.data.code == 0) {

        }
      })
    },
    goBack() {
      this.$dadian("watchAgain")
      this.set_answer_storage()
      uni.reLaunch({
        url: '/pages/newAnswer/completePaly?requestCode=' + this.code + '&videoId=' + this.videoId
      })
    }
  }
}
</script>

<style scoped>
.b-box {
  width: 690upx;
  min-height: 10upx;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}

.video-name {
  width: 690upx;
  font-size: 36upx;
  font-weight: 500;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 10upx;
  margin-top: 30upx;
  margin-bottom: 20upx;
}

.video-tag {
  display: inline-block;
  min-width: 10upx;
  height: 54upx;
  line-height: 54upx;
  background: #EA7C0F;
  color: #fff;
  padding: 0 20upx;
  border-radius: 28upx 0upx 28upx 0upx;
}

.video-info {
  min-height: 10upx;
  margin: 30upx 0;
  color: #666;
  font-size: 28upx;
  display: flex;
}

.video-info-time {
  flex: 1;
}

.video-info-num {

}

.video-answer-num {
  color: #666;
  font-size: 28upx;
  margin: 30upx 0;
}

.answer {
  min-height: 10upx;
  margin-bottom: 40upx;
}

.answer-title {
  line-height: 48upx;
  color: #333;
  font-weight: 600;
  font-size: 32upx;
  margin-bottom: 30upx;
}

.answer-choose {
  min-height: 10upx;
  background-color: #fff;
  background: #F0F0F0;
  border-radius: 16upx;
  font-size: 36upx;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-bottom: 20upx;
  padding: 30upx 0;
}

.answer-choose-active {
  background: #ECF6F0;
  color: #219F64;
}

.answer-choose-left {
  flex: 1;
  padding-left: 30upx;
}

.answer-choose-right {
  margin-right: 40upx;
  width: 36upx;
  height: 32upx;
}

.answer-btn {
  width: 690upx;
  height: 100upx;
  line-height: 100upx;
  color: #fff;
  background-color: #5CAE77;
  text-align: center;
  border-radius: 50upx;
  margin-top: 50upx;
  font-size: 40upx;
  font-weight: 500;
}

/* 后期添加 */
.video-date {
  width: 100%;
  display: flex;
  margin-bottom: 40upx;
  align-items: center;
}

.video-date-end-date {
  font-size: 34upx;
  font-weight: 500;
  color: #999999;
}

.video-date-value {
  font-size: 34upx;
  color: #EA7C0F;
  font-weight: 500;
}

.video-desc {
  width: 100%;
  background-color: #E2E2E2;
  border-radius: 4upx;
  box-sizing: border-box;
  padding: 16upx;
  margin-bottom: 40upx;
}

.video-desc-item {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 8upx;
  color: #666;
  font-size: 30upx;
  align-items: center;
}

.video-desc .icon {
  width: 30upx;
  height: 30upx;
  margin-right: 10upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 34upx 0upx;
  align-items: center;
  justify-content: space-between;
}

.title .title-count {
  font-size: 32upx;
  color: #666666;
  font-weight: 400;
}

.title-button {
  font-size: 32upx;
  color: #fff;
  background-color: #5CAE77;
  border-radius: 30upx;
  width: 180upx;
  height: 60upx;
  line-height: 60upx;
  text-align: center;
}
</style>
